Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New-PropertyControl-ContentTypePicker #610

Closed
wants to merge 6 commits into from
Closed

New-PropertyControl-ContentTypePicker #610

wants to merge 6 commits into from

Conversation

NishkalankBezawada
Copy link
Contributor

@NishkalankBezawada NishkalankBezawada commented Apr 1, 2024 •
edited
Loading

Q A
Bug fix? [ ]
New feature? [ ]
New sample? [x]
Related issues? fixes #598

What's in this Pull Request?

This control generates a ContentType picker field that can be used in the property pane of your SharePoint Framework web parts.

The control automatically retrieves the ContentType for a given SharePoint Site or selected SharePoint list:

ContentType picker

How to use this control in your solutions

  1. Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency.
  2. Import the following modules to your component:
import { PropertyFieldContentTypePicker, PropertyFieldContentTypePickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldContentTypePicker';
  1. You'll probably want to use this control in combination with the PropertyFieldListPicker. Make sure to select the multiSelect prop to false, as this control is designed to work with a single list. Store the list id in your web part properties, as follows:
export interface IPropertyControlsTestWebPartProps {
  list: string; // Stores the list ID
}
  1. Create a new property for your web part, as indicated between the BEGIN: and END: comments below:
export interface IPropertyControlsTestWebPartProps {
  list: string; // Stores the list ID

  // BEGIN: Added
  view: string; // Stores the view ID
  // END: Added
}
  1. Add the custom property control to the groupFields of the web part property pane configuration:
PropertyFieldContentTypePicker('contentType', {
  label: 'Select a Content Type',
  context: this.context,
  selectedContentType: this.properties.contentType,
  disabled: false,
  orderBy: PropertyFieldContentTypeOrderBy.Name,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'contentTypePickerFieldId'
})
  1. To fetch the contentTypes of a particular site, change the property pane configuration as follows:
PropertyFieldContentTypePicker('contentType', {
  label: 'Select a Content Type',
  context: this.context,
  selectedContentType: this.properties.contentType,
  disabled: false,
  webAbsoluteUrl:"https://****.sharepoint.com/sites/*****",
  orderBy: PropertyFieldContentTypeOrderBy.Name,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'contentTypePickerFieldId'
})

ContentType picker for site

  1. To fetch the contentTypes of selected list, change the property pane configuration as follows:
PropertyFieldContentTypePicker('contentType', {
  label: 'Select a Content Type',
  context: this.context,
  selectedContentType: this.properties.contentType,
  listId: {list-guid} //"0da3b4b7-8ebd-4f15-87ee-afae5cacadad"
  disabled: false,
  orderBy: PropertyFieldContentTypeOrderBy.Name,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'contentTypePickerFieldId'
})

ContentType picker for selected list

  1. If ListID specified in the propertiesc is not available in the selected site, the control will error out as follows
PropertyFieldContentTypePicker('contentType', {
  label: 'Select a Content Type',
  context: this.context,
  selectedContentType: this.properties.contentType,
  listId: {list-guid} //"0da3b4b7-8ebd-4f15-87ee-afae5cacadad"
  disabled: false,
  orderBy: PropertyFieldContentTypeOrderBy.Name,
  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
  properties: this.properties,
  onGetErrorMessage: null,
  deferredValidationTime: 0,
  key: 'contentTypePickerFieldId'
})

ContentType picker Error

Implementation

The PropertyFieldViewPicker control can be configured with the following properties:

Property Type Required Description
label string yes Property field label displayed on top.
listId string no The ID of the list or library you wish to select a contentType from.
disabled boolean no Specify if the control needs to be disabled.
context BaseComponentContext yes Context of the current web part.
selectedContentType string string[] no
orderBy PropertyFieldContentTypeOrderBy no Specify the property on which you want to order the retrieve set of ContentTypes.
webAbsoluteUrl string no Absolute Web Url of target site (user requires permissions)
onPropertyChange function yes Defines a onPropertyChange function to raise when the date gets changed.
properties any yes Parent web part properties, this object is use to update the property value.
key string yes An unique key that indicates the identity of this control.
onGetErrorMessage function no The method is used to get the validation error message and determine whether the input value is valid or not. See this documentation to learn how to use it.
deferredValidationTime number no Control will start to validate after users stop typing for deferredValidationTime milliseconds. Default value is 200.
contentTypesToExclude string[] no Defines contentTypes by which should be excluded from the contentType picker control. You can specify contentType titles or IDs
filter string no Filter contentTypes from OData query.
onContentTypesRetrieved (contentType: ISPContentType[]) => PromiseLike<ISPContentType[]> | ISPContentType[] no Callback that is called before the dropdown is populated.

Enum PropertyFieldContentTypePickerOrderBy

Name Description
Id Sort by contentType ID
Title Sort by contentType title

@NishkalankBezawada NishkalankBezawada marked this pull request as draft April 3, 2024 10:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@NishkalankBezawada